<template>

	<div id="waihui">
		<split-pane :min-percent="35" :default-percent="datatop" split="horizontal" v-on:resize="resize">
			<template slot="paneL">
				<div class="nav">
					<div class="nav-img">
						<div class="btn-back" @click="gethome()"></div>
						<div class="btn-home" @click="gethome()"></div>
						<div class="btn-3" @click="$store.commit('set', { isinclass: 3 })" style="width: 14px;"></div>
						<div class="btn-news" @click="jiaonyi()"></div>
						<div class="btn-refresh" @click="$router.go(0)"></div>
						<div class="btn-big"></div>
						<div class="btn-small"></div>
						<div class="btn-changecolor" @click="changebtn()"></div>
						<div class="btn-pen" @click="kline()" style="width: 15px;"></div>
						<div class="btn-alert"></div>
						<div class="btn-sort" style="width: 14px;"></div>
						<div style="width: 1px;background: #333;margin:3px 0px;padding: 0px;"></div>
						<div class="btn-infolist" @click="gethome()"></div>
						<div class="btn-fenshi" @click="fenshi()"></div>
						<div class="btn-kline" @click="kline()"></div>
						<div style="width: 1px;background: #333;margin:3px 0px;padding: 0px;"></div>
						<div class="btn-dayline" @click="dayline()"></div>
						<div class="btn-weakline" @click="weakline()"></div>
						<div class="btn-mouthline" @click="mouthline()"></div>
						<div class="btn-yearline" @click="yearline()"></div>
						<div style="width: 1px;background: #333;margin:3px 0px;padding: 0px;"></div>
						<div class="btn-oneline" @click="oneline()"></div>
						<!-- <div class="btn-threeline" @click="threeline()"></div> -->
						<div class="btn-fiveline" @click="fiveline()"></div>
						<div class="btn-fifteenline" @click="fifteenline()"></div>
						<div class="btn-halfline" @click="halfline()"></div>
						<div class="btn-hourline" @click="hourline()"></div>
						<div class="btn-2hourline" @click="twohourline()"></div>
					</div>
					<div class="nav-title">{{$t("m.PackageName")}}</div>
					<div @click="toggleLang('zh')" :disabled="$i18n.locale == 'zh'" v-show="$i18n.locale == 'en'"
						class="langBtn">中文</div>
					<div @click="toggleLang('en')" :disabled="$i18n.locale == 'en'" v-show="$i18n.locale == 'zh'"
						class="langBtn">English</div>
					<div class="nav-btn">
						<div class="btn-jiaoyi" @click="jiaonyi()"></div>
						<div class="btn-luntan"></div>
						<div class="btn-tuichu" @click="dialogVisible = true"></div>
					</div>
				</div>
				<div :class="datatop == 100 ? 'info-context  padding-bottom' : 'info-context'">
					<context></context>
				</div>
			</template>
			<template slot="paneR">
				<!-- 交易-->
				<navbottom v-if="bottomlist == 1"></navbottom>
				<!-- 锁定-->
				<footlock v-if="bottomlist == 2"></footlock>
				<!-- 登录-->
				<footlogin v-if="bottomlist == 3"></footlogin>
				<bottoms></bottoms>
			</template>
		</split-pane>
		<!-- 退出modal -->
		<el-dialog :title="$t('m.Tuichu')" :visible.sync="dialogVisible" width="30%">
			<span>{{$t('m.Tuichutitle')}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="signout()">{{$t('m.Checkbtn')}}</el-button>
				<el-button @click="dialogVisible = false">{{$t('m.Cancelbtn')}}</el-button>
			</span>
		</el-dialog>
    <!-- 公告弹窗 -->
    <el-dialog :title="$t('m.SystemMsg')" :visible.sync="noticeVisible" width="50%" style="height: 80vh;overflow: auto;">
        <p v-html="NewestGongGao"></p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="noticeVisible = false">{{$t('m.Close')}}</el-button>
        </span>
      </el-dialog>
		<div class="looding2" v-if="!loginbtn2">{{$t('m.LoginTips2')}}</div>
	</div>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import navbottom from '@/components/navbottom.vue';
	import footlock from '@/components/footlock.vue';
	import footlogin from '@/components/footlogin.vue';
	import bottoms from '@/components/bottoms.vue';
	import context from '@/components/context.vue';

	export default {
		name: 'home',
		components: {
			context,
			navbottom,
			bottoms,
			footlogin,
			footlock
		},
		computed: mapState({
			select: state => state.trade.select /* 当前选中股指 */ ,
			symbol: state => state.trade.symbol /* 全部行情 */ ,
			symbos: state => state.trade.symbos /* 当前页面显示杨青 */ ,
			ticket: state => state.trade.ticket /* 推送数据 */ ,
			bottomlisttle: state => state.bottomlist /* 底部登录 */ ,
			navtopheight: state => state.navtopheight /* 分隔面板高度 */ ,
			loginbrn: state => state.loginbrn /* 推送数据 */ ,
			lefttablist: state => state.isinclass
			/* 控制左侧面板显示 */
		}),
		data() {
			return {
				dialogVisible: false, //退出弹出框
				datatop: 100,
				disfooter: false /* 底部交易显示隐藏 */ ,
        noticeVisible: false,  //  公告弹窗
				bottomlist: 3 /* 底部交易面板显示 */ ,
				changecolor: true /* 主题颜色true黑色false白色 */ ,
				loginbtn2: true,
        NewestGongGao: '' //  公告
			};
		},
		created: function() {
			//监听窗口变化
			window.onresize = () => {
				this.resize();
			};
		},
		watch: {
			/* 控制左侧面板显示*/
			lefttablist(val) {
				// console.log(val);
				if (val == 1) {
					if (!this.$svcInvoke.config._token) {
						if (localStorage.getItem('_token')) {
							this.$svcInvoke.setConf('_token', localStorage.getItem('_token'));
							return;
						} else {
							return this.jiaonyi();
						}
					}
				}
			},
			loginbrn(val) {
				if (val == false) {
					this.loginbtn2 = false;
					// this.$message.error('站点已关闭！');
				} else {
					this.loginbtn2 = true;
				}
			},
			/* 分隔面板高度*/
			navtopheight(val) {
				this.datatop = val;
			},
			bottomlisttle(val) {
				if (val == 'footlogin') {
					return (this.bottomlist = 1);
				}

				if (val == 'footlock') {
					this.bottomlist = 2;
				}
				if (val == 'footnav') {
					return (this.bottomlist = 3);
				}
			}
		},
		mounted() {
			this.contextmenu();
      this.getNotice();
		},
		methods: {
			//切换
			toggleLang(lang) {
				if (lang == 'zh') {
					localStorage.setItem('locale', 'zh')
					this.$i18n.locale = localStorage.getItem('locale')
					this.$message({
						message: '切换为中文！',
						type: 'success'
					})
				} else if (lang == 'en') {
					localStorage.setItem('locale', 'en')
					this.$i18n.locale = localStorage.getItem('locale')
					this.$message({
						message: 'Switch to English!',
						type: 'success'
					})
				}
			},
			/* 分时线 */
			fenshi() {
				this.$store.commit('set', {
					isinclass: 4
				});
				this.$store.commit('set', {
					klinetab: 'dayline'
				});
				// if (window.kline) {
				// 	window.kline.setPeriod('line');
				// }
			},
			/* K线 */
			kline() {
				this.$store.commit('set', {
					isinclass: 4
				});
				this.$store.commit('set', {
					klinetab: '1m'
				});
				this.$store.commit('set', {
					klinetime: '6000'
				});
			},
			/* 日线 */
			dayline() {
				this.$store.commit('set', {
					isinclass: 4
				});
				this.$store.commit('set', {
					klinetab: '1d'
				});
				this.$store.commit('set', {
					klinetime: '86400000'
				});
			},
			/* 周线 */
			weakline() {
				this.$store.commit('set', {
					isinclass: 4
				});
				this.$store.commit('set', {
					klinetab: '1w'
				});
				this.$store.commit('set', {
					klinetime: '604800000'
				});
			},
			/* 月线 */
			mouthline() {
				this.$store.commit('set', {
					isinclass: 4
				});
				this.$store.commit('set', {
					klinetab: 'mounth'
				});
				this.$store.commit('set', {
					klinetime: 'mounth'
				});
			},
			// 年线
			yearline() {
				this.$store.commit('set', {
					isinclass: 4
				});
				this.$store.commit('set', {
					klinetab: 'year'
				});
				this.$store.commit('set', {
					klinetime: 'year'
				});
			},
			/* 1线 */
			oneline() {
				this.$store.commit('set', {
					isinclass: 4
				});
				this.$store.commit('set', {
					klinetab: '1m'
				});
				this.$store.commit('set', {
					klinetime: '6000'
				});
			},
			/* 3线 */
			threeline() {
				this.$store.commit('set', {
					isinclass: 4
				});
				this.$store.commit('set', {
					klinetab: '3m'
				});
				this.$store.commit('set', {
					klinetime: '18000'
				});
			},
			/* 5线 */
			fiveline() {
				this.$store.commit('set', {
					isinclass: 4
				});
				this.$store.commit('set', {
					klinetab: '5m'
				});
				this.$store.commit('set', {
					klinetime: '30000'
				});
			},
			/* 15线 */
			fifteenline() {
				this.$store.commit('set', {
					isinclass: 4
				});
				this.$store.commit('set', {
					klinetab: '15m'
				});
				this.$store.commit('set', {
					klinetime: '90000'
				});
			},
			/* 30线 */
			halfline() {
				this.$store.commit('set', {
					isinclass: 4
				});
				this.$store.commit('set', {
					klinetab: '30m'
				});
				this.$store.commit('set', {
					klinetime: '180000'
				});
			},
			/* 1h线 */
			hourline() {
				this.$store.commit('set', {
					isinclass: 4
				});
				this.$store.commit('set', {
					klinetab: '1h'
				});
				this.$store.commit('set', {
					klinetime: '3600000'
				});
			},
			// 2小时
			twohourline() {
				this.$store.commit('set', {
					isinclass: 4
				});
				this.$store.commit('set', {
					klinetab: '2h'
				});
				this.$store.commit('set', {
					klinetime: '7200000'
				});
			},
			resize() {
				// this.$refs['router-user'].resize();
				// this.$refs['router-kline'].resize();
				// this.$refs['router-products'].resize();
				// console.log('窗口变化！！！！，需要重新绘图！');
			},
			/* 跳转主页 */
			gethome() {
				this.$store.commit('set', {
					isinclass: 2
				});
			},
			contextmenu() {
				document.oncontextmenu = function() {
					return false;
				}; //禁止鼠标右键菜单显示
			},
			/* 变换颜色*/
			changebtn() {
				this.changecolor = !this.changecolor;
				this.$store.commit('set', {
					changecolor: this.changecolor
				});
			},
			/* 交易*/
			jiaonyi() {
				this.disfooter = !this.disfooter;
				if (this.disfooter == true) {
					this.datatop = 55;
					this.$store.commit('set', {
						navtopheight: this.datatop
					});
				} else {
					this.datatop = 100;
					this.$store.commit('set', {
						navtopheight: this.datatop
					});
				}
			},
			/* 退出*/
			signout() {
				//退出登录
				// window.sessionStorage.clear();
				// localStorage.clear();
				this.$store.commit('set', {
					bottomlist: 'footnav'
				});
				this.$svcInvoke.setConf('_token', '');
				localStorage.setItem('_token', null);
				this.$store.commit('set', {
					isinclass: 2
				});
				this.$router.push({
					path: '/'
				});
			},
      //  获取公告
      getNotice(){
        this.$get('addons/tf-futures/article/notice?originContent=1').then(res => {
          if (res.code == 200) {
            console.log(res);
            if (res.data.length > 0) {
              this.NewestGongGao = res.data[0].content;
              this.noticeVisible = true;
            }
          }
        });
      }
		}
	};
</script>

<style lang="less">
	.looding2 {
		position: fixed;
		top: 0rem;
		left: 0rem;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 30px;
		width: 100%;
		height: 100vh;
		line-height: 100vh;
		text-align: center;
	}

	#waihui {
		height: 100vh;
	}

	.splitter-pane.horizontal.splitter-paneR[data-v-815c801c] {
		position: absolute;
		bottom: 0;
		width: 100%;
		padding-top: 0px;
		z-index: 100;
	}

	.nav {
		background: linear-gradient(#ddd, #fbf6f6, #ddd);
		width: 100%;
		height: 25px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.nav-img {
			width: 65%;
			min-width: 600px;
			box-sizing: border-box;
			padding-left: 5px;

			div {
				float: left;
				background: url(../assets/navimg.png) no-repeat;
				height: 16px;
				width: 16px;
				overflow: hidden;
				box-sizing: border-box;
				padding: 1px;
				margin: 3px 5px;
			}

			div:hover {
				border: 1px solid #333;
				border-radius: 3px;
			}

			.btn-back {
				background-position: -331px 0;
			}

			.btn-home {
				background-position: -347px 0;
			}

			.btn-3 {
				background-position: 0 0;
			}

			.btn-news {
				background-position: -363px 0;
			}

			.btn-refresh {
				background-position: -315px 0;
			}

			.btn-big {
				background-position: -267px 0;
			}

			.btn-small {
				background-position: -283px 0;
			}

			.btn-changecolor {
				background-position: -299px 0;
			}

			.btn-pen {
				background-position: -28px 0;
			}

			.btn-alert {
				background-position: -443px 0;
			}

			.btn-sort {
				background-position: -14px 0;
			}

			.btn-infolist {
				background-position: -459px 0;
			}

			.btn-fenshi {
				background-position: -475px 0;
			}

			.btn-kline {
				background-position: -427px 0;
			}

			.btn-dayline {
				background-position: -379px 0;
			}

			.btn-weakline {
				background-position: -395px 0;
			}

			.btn-mouthline {
				background-position: -411px 0;
			}

			.btn-yearline {
				background-position: -91px 0;
			}

			.btn-oneline {
				background-position: -75px 0;
			}

			.btn-threeline {
				background-position: -123px 0;
			}

			.btn-fiveline {
				background-position: -43px 0;
			}

			.btn-fifteenline {
				background-position: -139px 0;
			}

			.btn-halfline {
				background-position: -235px 0;
			}

			.btn-hourline {
				background-position: -251px 0;
			}

			.btn-2hourline {
				background-position: -203px 0;
			}
		}

		.nav-title {
			color: red;
			cursor: default;
			box-sizing: border-box;
		}

		.nav-btn {
			width: 25%;
			min-width: 150px;
			box-sizing: border-box;
			padding-right: 5px;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			div {
				height: 20px;
				width: 74px;
				background: url(../assets/btn.png) no-repeat;
				margin-left: 5px;
				box-sizing: border-box;
				padding: 1px;
			}

			.btn-jiaoyi {
				background-position: -286px 0;
			}

			.btn-luntan {
				background-position: -373px 0;
			}

			.btn-tuichu {
				background-position: -203px 0;
			}
		}
	}

	.info-context {
		width: 100%;
		height: calc(100% - 25px);
	}

	.padding-bottom {
		box-sizing: border-box;
		padding-bottom: 25px;
	}
</style>
